<template>
    <div>
        <h4>发表评论</h4>
        <hr>
        <textarea placeholder="最多吐槽120个字" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postMsg">发表评论</mt-button>
        <!-- 评论列表区域 -->
        <div class="com-list">
            <div class="com-item" v-for="(item,i) in cmtlist" :key="i">
                <div class="com-title">第{{i+1}}楼&nbsp;用户：{{item.user_name}}&nbsp;发表时间：{{item.add_time|dateFormat}}</div>
                <div class="com-body">{{item.content}}</div>
            </div>

        </div>

        <mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>


    </div>
</template>

<script>
// 按需要从Mint-UI中导入需要的弹框组件
import {Toast} from 'mint-ui'
export default {
    data(){
        return{
            page:1,
            cmtlist:[],
            msg:""
        };
    },
    created(){
        this.getCommentByPage()

    },
    methods: {
        async getCommentByPage(){
            const {data}=await this.$http.get('/api/getcomments/'+this.newsid+"?pageindex="+this.page)
            if(data.status==0)return (this.cmtlist=this.cmtlist.concat(data.message));
        },
        loadMore(){
            // 点击按钮，加载更多评论
            // 当触发这个加载更多方法之前，应该让page页面+1之后，再调用getCommentByPage()方法
            this.page++;
            this.getCommentByPage()

        },
        async postMsg(){
            // 点击发表评论
            // 如果用户没有填写内容，则阻止发表评论
            if(this.msg.trim().length<=0) return Toast("请填写评论内容");
            // 发表评论的逻辑
            const {data}=await this.$http.post("/api/postcomment/"+this.newsid,{content:this.msg.trim()})
            console.log(data)
            if(data.status==0){
                // 刷新评论列表
                // 再次调用getCommentByPage
                // this.cmtlist=[]
                // this.getCommentByPage();
                // 以上方法会把之前的评论情况，为了防止，我们在客户端，手动拼接一个评论的对象，
                // 并把这个评论对象unshift到cmtlist中
                this.cmtlist.unshift({
                    user_name:"匿名用户",
                    add_time:new Date(),
                    content:this.msg.trim()
                })
            }

        }

    },
    props:["newsid"]
}
</script>

<style lang="scss" scoped>
textarea{
    font-size: 14px;
    margin: 0;
}
.com-list{
    .com-item{
        margin-top:4px;
        line-height:30px;
        .com-title{
            font-size: 14px;
            background-color: #ddd;
        }
        .com-body{
            font-size: 13px;
            text-indent:2em;
        }
    }
}
</style>